<template>
  <div class="register">
    <h4>用户登录</h4>
    <van-form @submit="onSubmit">
      <van-field
        v-model="state.userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="state.userPwd"
        type="password"
        name="userPwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { reactive } from "vue";
import { login } from "../api/login";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from 'vant';
export default {
  data() {
    return {};
  },
  setup() {
    const store = new useStore();
    const router = useRouter();
    const state = reactive({
      userName: "",
      userPwd: "",
    });
    const onSubmit = (values) => {
      login({ userName: values.userName, userPwd: values.userPwd }).then(
        (res) => {
          if (res.status === 200) {
            Toast.success('登录成功');
            store.dispatch("module/loginFunchange", values.userName);
            localStorage.setItem("token", res.data);
            router.push("/");
          } else {
            Toast.fail('登录失败');
          }
        },
        (err) => {
          console.log(err);
        }
      );
    };

    return {
      state,
      onSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.user {
  width: 100%;
  height: 40px;
  background: sandybrown;
}
</style>